<template>
	<div id="public_layoutMainContainer" class="systemPermissionContainer">
		<!-- 搜索 -->
		<div class="public_searchContainer">
			<el-form ref="searchFormRef" :inline="true" :model="searchForm">
				<el-row :gutter="20">
					<el-col :span="24" :sm="12" :md="8" :lg="6" :xl="4">
						<el-form-item class="w-100" label="权限名称">
							<el-input v-model="searchForm.permission_name" placeholder="请输入权限名称" clearable />
						</el-form-item>
					</el-col>

					<el-col :span="24" :sm="12" :md="8" :lg="6" :xl="4">
						<el-form-item label="权限状态" class="w-100">
							<el-select v-model="searchForm.status" placeholder="请选择权限状态" clearable>
								<el-option label="正常" value="enable" />
								<el-option label="停用" value="disabl" />
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="24" :sm="12" :md="8" :lg="6" :xl="4">
						<el-form-item class="w-100 searchOperateFormItem">
							<el-button type="primary" @click="getPermission">查询</el-button>
							<el-button @click="resetSearchForm">重置</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>

		<!-- 操作栏 -->
		<div class="public_operateContainer">
			<el-button type="primary" @click="addPermission">新增权限</el-button>
		</div>

		<!-- 表格 -->
		<el-table
			class="public_tableContainer tableContainer"
			v-loading="permissionTableConfig.loading"
			:data="permissionTableConfig.data"
			border
			row-key="_id"
		>
			<el-table-column prop="permission_name" label="权限名称">
				<template #default="{ row }">
					<div class="permission_name_box">
						<div class="leftBox">
							<!-- 图标 -->
							<component v-if="row.icon" :is="row.icon" class="icon" />
							<!-- 名称 -->
							<p>{{ row.permission_name }}</p>
						</div>

						<!-- 类型 -->
						<div class="rightTypeBox">
							<el-tag disable-transitions type="danger" v-if="row.type === 'catalogue'">目录</el-tag>
							<el-tag disable-transitions type="success" v-if="row.type === 'menu'">菜单</el-tag>
							<el-tag disable-transitions v-if="row.type === 'resource'">资源</el-tag>
						</div>
					</div>
				</template>
			</el-table-column>

			<el-table-column prop="sort" label="排序" width="100" align="center" />

			<el-table-column prop="status" label="状态" width="100" align="center">
				<template #default="{ row }">
					<el-tag v-if="row.status === 'enable'" disable-transitions type="primary">正常</el-tag>
					<el-tag v-if="row.status === 'disable'" disable-transitions type="danger">禁用</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="createdAt" label="创建时间">
				<template #default="{ row }">{{ moment(row.createdAt).format("YYYY-MM-DD HH:mm:ss") }}</template>
			</el-table-column>
			<el-table-column prop="createdAt" label="更新时间">
				<template #default="{ row }">{{ moment(row.updatedAt).format("YYYY-MM-DD HH:mm:ss") }}</template>
			</el-table-column>
			<el-table-column label="操作">
				<template #default="{ row }">
					<el-button type="primary" link @click="editPermission(row)">编辑</el-button>
					<el-button type="primary" link v-if="row.key !== 'root'" @click="removePermissions(row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>

	<!-- 删除确认Dialog -->
	<removeConfirmDialog ref="removeConfirmDialogRef" />
	<permissionDialog
		ref="permissionDialogRef"
		:fullPermissionTree="fullPermissionTree"
		@upTreeData="getPermission({ isUpdateFullTree: true })"
	/>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { getPermissionTreeApi, deletePermissionApi } from "@/api/system/permission";
import moment from "moment";
import removeConfirmDialog from "@/components/confirmDialog/index.vue";
import permissionDialog from "./components/permissionDialog.vue";

// 搜索
const searchFormRef = ref();
const searchForm = ref({ permission_name: undefined, status: undefined });
// 重置
const resetSearchForm = () => {
	searchForm.value = { name: undefined, status: undefined };
	getPermission({ isUpdateFullTree: true });
};

// 完整的树形数据
const fullPermissionTree = ref([]);

// 表格
const permissionTableConfig = reactive({
	loading: false,
	data: [],
});
const getPermission = async ({ isUpdateFullTree = false }) => {
	permissionTableConfig.loading = true;
	try {
		const res = await getPermissionTreeApi({ ...searchForm.value });
		permissionTableConfig.data = res.data;

		if (isUpdateFullTree) fullPermissionTree.value = res.data;
	} finally {
		permissionTableConfig.loading = false;
	}
};

// 删除数据
const removeConfirmDialogRef = ref();
const removePermissions = (row) => {
	removeConfirmDialogRef.value.open({
		title: "删除权限",
		content: `确定删除[${row.permission_name}]资源吗？`,
		isAsync: true,
		confirm: async ({ stopLoading, done }) => {
			try {
				await deletePermissionApi({ id: row._id });
				done();
				getPermission({ isUpdateFullTree: true });
			} catch (e) {
				stopLoading();
			}
		},
	});
};

// 新增数据
const permissionDialogRef = ref();
const addPermission = () => {
	permissionDialogRef.value.open();
};

// 编辑数据
const editPermission = (data) => {
	const newData = { ...data, pid: data.pid ? data.pid : "root" };
	permissionDialogRef.value.open({ type: "edit", data: newData });
};

onMounted(() => {
	getPermission({ isUpdateFullTree: true });
});
</script>

<style scoped lang="scss">
.systemPermissionContainer {
	.tableContainer {
		:deep(.cell) {
			display: flex;
			align-items: center;

			.permission_name_box {
				flex: 1;

				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 5px;

				.leftBox {
					display: flex;
					align-items: center;
					gap: 5px;

					.icon {
						width: 20px;
						height: 20px;
					}
				}
			}
		}
	}
}
</style>
